$(document).ready(function() {  
    $("#tabla-principal th").on('click',function(e){
       $(this).parent().find('th').css('background-color','transparent');
       $(this).css('background-color','#bbb'); 
    });  
    filtroDeTabla();
}); 
$(function(){
    $('#dlg-modal').hide();//oculta el dialogo modal
    $('#contenido-forma').hide();//oculta la forma que contiene la informaciln para el dialogo modal
    $('#confirmar-cambios-modal').hide();//oculta el cialogo modal de confirmacion de cambios
    $('.modificar-modal').bind('click', function(e) {//se le asigna el evento click al boton modificar d ela tabla principal
        e.preventDefault(); 
        funcionModificar(activo);
        funcionValidar();
    }); 
    $('.agregar-modal').bind('click', function(e) {//se le asigna el evento click al boton modificar d ela tabla principal
        e.preventDefault();
        funcionAgregar(); 
        funcionValidar();
    });
    $('.eliminar-modal').bind('click', function(e) {
        e.preventDefault();
        funcionEliminar(activo); 
    }); 
    obtenerRenglon();
});

////////Seccion Validar Datos//////////
function funcionValidar(){
     $('#forma-modal').validate({ // initialize the plugin
         // Specify the validation rules
        rules: { 
            descripcion:{
                minlength: 3,
                required: true
            },
            porcentaje:{
                required: true, 
                number: true
            }
        },
            
        tooltip_options:{
            descripcion:{  placement: 'top' },
            porcentaje: {  placement: 'top' }
        }, 
        messages: { 
            descripcion:{
                required: "Campo Requerido",
                minlength: "Minimo 3 Caracteres"
            },
            porcentaje:{
                required: "Campo Requerido",
                number: "Solo use numeros"
            }
        }
    });  
} 
/////////Seccion Agregar////////////////
////////////////////////////////////////
function funcionAgregar(){ 
    preparaAgregarModal();
    $('#dlg-modal').bPopup({ 
        speed: 200,
        transition: 'slideDown',onClose: function(){
            cerrandoModal();
        }
    }); 
    $('.aceptar-modal').attr('id','agregar-boton');
    $('.cancelar-modal').bind('click',function(){ 
                $('#dlg-modal').bPopup().close();
            });
    $('#agregar-boton').bind('click',function(){
        $('#borde-int-confirmar').html('<br><br>¿Está seguro que <br><br>desea dar de alta<br> <br>al nuevo acabado?'
                                        +'<div class="btn btn-success" id="confirmar-cambios">Agregar</div><div class="btn btn-danger" id="cancelar-cambios">Cancelar</div>');
                if($('#forma-modal').valid()){
                        $('#confirmar-cambios-modal').bPopup({
                            speed: 200,
                            transition: 'slideDown',onClose: function(){
                                $('#cancelar-cambios').unbind('click');
                                $('#confirmar-cambios').unbind('click');
                            }
                        }); 
                        $('#cancelar-cambios').bind('click',function(){ 
                            $('#confirmar-cambios-modal').bPopup().close();
                        });
                        $('#confirmar-cambios').click(function(){
                               agregarAcabado();
                        });
                } 
    });
} 
function preparaAgregarModal(){ 
    $('#dlg-modal #contenido').html($('#contenido-forma').html());
    $('#contenido-forma').html('');    
    $('.titulo-modal').html('Agregar Acabado');    
    $('#forma-modal').addClass('cliente-modal-forma');        
    llenaForma2();
    $('.aceptar-modal').html('Agregar');
    $('.cancelar-modal').html('Cancelar');
    $('.aceptar-modal').attr('id','agregar-boton');
}
function agregarAcabado(){
          
    $('#dlg-modal').bPopup().close();
    $('#confirmar-cambios-modal').bPopup().close();
    var active = 0;
    var mostrar = 0;
    if($('#dlg-activacion').is(':checked'))
        active = 1; 
    if($('#dlg-mostrar').is(':checked'))
        mostrar = 1;
    $.post(
        rutaAgregar,{ 
            activacion: active, 
            mostrar: mostrar,
            descripcion:$('#dlg-descripcion').val(),
            porcentaje:$('#dlg-porcentaje').val()
        },
        function(nuevo){ 
            if(nuevo==null){
                alert('El acabado no fue agregado!');
                return;
            }  
            alert(nuevo['id']);
            alert(nuevo['descripcion']);
            alert(nuevo['porcentaje']);
            
            var activacion, mostrar;
            if(nuevo['activacion']==1)
                activacion = 'Si';
            else
                activacion = 'No';
            if(nuevo['mostrar']==1)
                mostrar = 'Si';
            else
                mostrar = 'No';
            alert(activacion);
            alert(mostrar);
            tabla.fnAddData( [
                nuevo['id'],
                nuevo['descripcion'],
                nuevo['porcentaje'],
                activacion, 
                mostrar]);
            
            tabla.$('tr').each(function(){
               $(this).find('td:nth-child(1)').addClass('id-tabla'); 
               $(this).find('td:nth-child(2)').addClass('descripcion-tabla'); 
               $(this).find('td:nth-child(3)').addClass('porcentaje-tabla'); 
               $(this).find('td:nth-child(4)').addClass('activacion-tabla'); 
               $(this).find('td:nth-child(5)').addClass('mostrar-tabla'); 
            });
             
            quitaClickRenglon();
            todos[todos.length] = nuevo;
            alert('Cliente agregado!');
            clickRenglon();
            
        });
        
}
////////////////////////////////////////
//////////////Fin Agregar///////////////


/////////Seccion Modificar//////////////
////////////////////////////////////////
function funcionModificar(elemento){
    var id_ele = elemento;//.parent().parent().find('td:first').html();//se obtiene el id del elemento al que se le dio click
    todos.forEach(function(c){
        if(c['id']==id_ele){
            preparaModificarModal(c);
            $('.aceptar-modal').attr('id','modificar-boton');
            $('#dlg-modal').bPopup({ 
                speed: 200,
                transition: 'slideDown',onClose: function(){
                    cerrandoModal();
                }
            }); 
            $('.cancelar-modal').bind('click',function(){ 
                $('#dlg-modal').bPopup().close();
            });
            $('#modificar-boton').bind('click',function(){
                $('#borde-int-confirmar').html('<br><br>¿Está seguro que <br><br>desea guardar los<br> <br>cambios?'
                                                +'<div class="btn btn-success" id="confirmar-cambios">Guardar</div><div class="btn btn-danger" id="cancelar-cambios">Cancelar</div>');
            if($('#forma-modal').valid()){                                        
                    $('#confirmar-cambios-modal').bPopup({ 
                        speed: 200,
                        transition: 'slideDown',onClose: function(){
                            $('#cancelar-cambios').unbind('click');
                            $('#confirmar-cambios').unbind('click');
                        }
                    }); 
                    $('#cancelar-cambios').bind('click',function(){ 
                        $('#confirmar-cambios-modal').bPopup().close();
                    });
                    $('#confirmar-cambios').click(function(){
                        modificarAcabado();
                    });
                } 
            });
            return;
        }
    });
}
function preparaModificarModal(c){
    $('#dlg-modal #contenido').html($('#contenido-forma').html());
    $('#contenido-forma').html('');
    $('.titulo-modal').html('Modificar Acabado');
    $('#forma-modal').addClass('cliente-modal-forma');
    llenaForma(c);   
    $('.aceptar-modal').show();
    $('.cancelar-modal').show();
    $('.aceptar-modal').html('Guardar');
    $('.cancelar-modal').html('Cancelar');
}
 
function modificarAcabado(){
    $('#dlg-modal').bPopup().close();
    $('#confirmar-cambios-modal').bPopup().close();
    var active = 0;
    var mostrar = 0;
    if($('#dlg-mostrar').is(':checked'))
        active = 1; 
    if($('#dlg-activacion').is(':checked'))
        mostrar = 1;  
    
    $.post(rutaModificar,{
            mostrar: active,
            activacion: mostrar,
            id: $('#dlg-id').val(),
            descripcion:$('#dlg-descripcion').val(),
            porcentaje: $('#dlg-porcentaje').val()
        },
        function(elemento){
            if(elemento==null){
                alert('El acabado no fue modificado!');
                return;
            }
            $('.contenedor-tabla tbody').find('.id-tabla').each(function(){
                if($(this).text()==elemento['id']){                    
                    $(this).parent().find('.descripcion-tabla').text(elemento['descripcion']);
                    $(this).parent().find('.porcentaje-tabla').text(elemento['porcentaje']);
                    if(elemento['mostrar'] == 1)
                        $(this).parent().find('.mostrar-tabla').text("Si");
                    else 
                        $(this).parent().find('.mostrar-tabla').text("No"); 
                    
                    if(elemento['activacion'] == 1)
                        $(this).parent().find('.activacion-tabla').text("Si");
                    else 
                        $(this).parent().find('.activacion-tabla').text("No"); 
                }
            });
            for(var i = 0;i<todos.length;i++){
                if(todos[i]['id']==elemento['id']){
                    todos[i] = elemento;
                    break;
                }
            }
            alert('Acabado modificado!'); 
        });
}
////////////////////////////////////////
/////////////Fin Modificar//////////////

/////////Seccion Eliminar///////////////
////////////////////////////////////////
function funcionEliminar(elemento){
    var id_ele = elemento;//.parent().parent().find('td:first').html();//se obtiene el id del elemento al que se le dio click
    $('#borde-int-confirmar').html('<br><br>¿Está seguro que <br><br>desea eliminar el<br> <br>acabado con id '+ id_ele +'?<br><br>'
                                    +'El registro no se podrá recuperar'
                                    +'<div class="btn btn-success" id="confirmar-cambios">Aceptar</div><div class="btn btn-danger" id="cancelar-cambios">Cancelar</div>');
    $('#confirmar-cambios-modal').bPopup({ 
        speed: 200,
        transition: 'slideDown',onClose: function(){
            $('#cancelar-cambios').unbind('click');
            $('#confirmar-cambios').unbind('click');
        }
    }); 
    $('#cancelar-cambios').bind('click',function(){ 
        $('#confirmar-cambios-modal').bPopup().close();
    });
    $('#confirmar-cambios').click(function(){
        eliminarAcabado(id_ele);
    });
}
function eliminarAcabado(id){
    $('#confirmar-cambios-modal').bPopup().close();
    $.post(
        rutaEliminar,
        {id: id},
        function(elemento){
            if(elemento['eliminado']==false)
                alert('El acabado no fue eliminado!');
            for(var i = 0;i<todos.length;i++){
                if(todos[i]['id']==elemento['id']){
                    todos.splice(i,1);
                    break;
                }
            }
            $('.contenedor-tabla tbody').find('.id-tabla').each(function(){
                if($(this).text()==elemento['id'])
                    $(this).parent().remove();
            });
            alert('Acabado eliminado!'); 
        });
}
////////////////////////////////////////
/////////////Fin Eliminar///////////////


///llenado de informacion y eventos///
//////////////////////////////////////
function llenaForma(c){ 
    $('#forma-modal').addClass('form-inline');
    $('#dlg-id').val(c['id']);
    $('#dlg-descripcion').val(c['descripcion']);
    $('#dlg-porcentaje').val(c['porcentaje']);
    
    if(c['mostrar'] == 0) 
        $('#dlg-mostrar').attr('checked',false);
    else
        $('#dlg-mostrar').attr('checked',true);
    
    if(c['activacion'] == 0) 
        $('#dlg-activacion').attr('checked',false);
    else
        $('#dlg-activacion').attr('checked',true);
    
    $('.dropdown').removeClass('open');
}
function llenaForma2(){ 
    $('#forma-modal').addClass('form-inline');
    $('#dlg-id').val('Nuevo');
    $('#dlg-descripcion').show();
    $('#dlg-porcentaje').val(''); 
    $('#dlg-activacion').attr('checked',false);
    $('#dlg-mostrar').attr('checked',false);    
}
function vaciaForma(){
    $('#forma-modal').removeClass('cliente-modal-forma');
    $('#forma-modal').removeClass('form-inline');
    $('#dlg-id').val('');  
    $('#dlg-descripcion').val('');
    $('#dlg-porcentaje').val('');
    $('#dlg-activacion').attr('checked',false); 
    $('#dlg-mostrar').attr('checked',false); 
}  
function cerrandoModal(){
    $('.tooltip').hide(); 
    $('#contenido-forma').html($('#dlg-modal #contenido').html());
    $('#dlg-modal #contenido').html('');
    vaciaForma();
}
/////////////////////////////////////////
/////////////////////////////////////////
//Fin llenado de informacion  y eventos//
function filtroDeTabla(){
    var datatable = $("#tabla-principal").dataTable({
        "sPaginationType": "full_numbers",
        "oLanguage": {
            "sSearch": "Filtrar con el texto: _INPUT_",
            "sLengthMenu": "Registros visibles: _MENU_",
            "oPaginate": {
                "sNext": "Siguiente",
                "sPrevious": "Anterior",
                "sFirst": "Primera",
                "sLast": "Ultima"
            },
            "sInfo": "Mostrando   _START_ a _END_   de un total de _TOTAL_ registros",
            "sInfoFiltered": "(filtrados de _MAX_ registros totales)"
        }
    });
    datatable.columnFilter({
        aoColumns: [{  },
                    { type: "text" }, 
                    { type: "number" },
                    null]
    });
}
function obtenerRenglon(){
    
     $('#tabla-principal tr').on('click',function(){
        $('#tabla-principal').find('.seleccionado').removeClass('seleccionado');
        $(this).addClass('seleccionado');
        activo = $(this).find('.id-tabla').text();
        $('#seleccion').text('Registro '+activo);
        $('.tres-botones .btn').removeAttr('disabled');
        itabla = oTable.fnGetPosition(this);
    });
    $('#tabla-principal tr').on('dblclick',function(){
        $('#tabla-principal').find('.seleccionado').removeClass('seleccionado');
        $(this).addClass('seleccionado');
        activo = $(this).find('.id-tabla').text();
        $('#seleccion').text('Registro '+activo);
        $('.tres-botones .btn').removeAttr('disabled');
        itabla = oTable.fnGetPosition(this);
        funcionModificar(activo);
        funcionValidar(); 
    });
}

function quitaClickRenglon()
{
    tabla.$('tr').off();
}
function clickRenglon(){
    tabla.$('tr').on('click',function(){
        $('#tabla-principal tr.seleccionado').removeClass('seleccionado');
        $(this).addClass('seleccionado');
        activo = $(this).find('.id-tabla').text();
        $('#seleccion').text('Registro '+activo);
        $('.dos-botones .btn').removeAttr('disabled');
        //itabla = oTable.fnGetPosition(this);
    });
    tabla.$('tr').on('dblclick',function(){
        $('#tabla-principal tr.seleccionado').removeClass('seleccionado');
        $(this).addClass('seleccionado');
        activo = $(this).find('.id-tabla').text();
        $('#seleccion').text('Registro '+activo);
        $('.dos-botones .btn').removeAttr('disabled');
        //itabla = oTable.fnGetPosition(this);
        funcionModificar(activo);
    });
     
}